<template lang="">
  <div class="article">
    <!-- always -->
    <el-card class="card" shadow="always">
      <div slot="header" class="">
        <span>查询条件</span>
      </div>
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        inline
        size="mini"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="订单编号">
              <el-input v-model="form.orderSn " placeholder="订单编号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单类型">
              <el-select v-model="form.orderType " placeholder="订单类型" clearable>
                <el-option :key="0" label="正常订单" :value="0" />
                <el-option :key="1" label="秒杀订单" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支付方式">
              <el-select v-model="form.payType" placeholder="支付方式" clearable>
                <el-option :key="0" label="未支付" :value="0" />
                <el-option :key="1" label="支付宝" :value="1" />
                <el-option :key="2" label="微信" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态">
              <el-select v-model="form.status" placeholder="订单状态" clearable>
                <el-option :key="0" label="待付款" :value="0" />
                <el-option :key="1" label="待发货" :value="1" />
                <el-option :key="2" label="已发货" :value="2" />
                <el-option :key="3" label="已完成" :value="3" />
                <el-option :key="4" label="退货" :value="4" />
                <el-option :key="5" label="无效订单" :value="5" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="btns">
          <el-button
            type="primary"
            size="mini"
            @click="onSearch"
          >搜索</el-button>
          <el-button size="mini" style="margin: 0 20px" @click="onReset()">重置</el-button>
        </div>
      </el-form>
    </el-card>
    <!-- 列表 -->
    <el-card shadow="hover" class="card">
      <el-table :data="list" border stripe>
        <el-table-column type="index" label="#" align="center" width="75" fixed="left" />
        <el-table-column prop="orderSn" label="订单编号" align="center" width="300" />
        <el-table-column prop="payType" label="支付方式" align="center" width="200">
          <template slot-scope="scope">
            <div>
              <el-tag
                v-if="scope.row.payType == 0"
                type="info"
                effect="dark"
              >未支付</el-tag>
              <el-tag
                v-else-if="scope.row.payType === 1"
                effect="dark"
                style="font-size:25px"
              >
                <svg-icon icon-class="aliPay" />

              </el-tag>
              <el-tag
                v-else
                effect="dark"
                type="success"
                style="font-size:25px"
              >
                <svg-icon icon-class="weixin" class="weixin" />

              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" align="center" width="200">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === 0"
              type="danger"
              effect="dark"
            >待付款</el-tag>
            <el-tag
              v-else-if="scope.row.status === 1"
              type="warning"
              effect="dark"
            >待发货</el-tag>
            <el-tag v-else-if="scope.row.status === 2">已发货</el-tag>
            <el-tag
              v-else-if="scope.row.status === 3"
              effect="dark"
            >已完成</el-tag>
            <el-tag
              v-else-if="scope.row.status === 4"
              type="info"
              effect="dark"
            >退货</el-tag>
            <el-tag v-else type="info">无效订单</el-tag>
          </template>

        </el-table-column>
        <el-table-column prop="createTime" label="添加时间" align="center" width="300" />
        <el-table-column prop="memberUsername" label="用户账号" align="center" width="200" />
        <el-table-column prop="editorType" label="订单类型" align="center" width="200">
          <template slot-scope="scope">
            <div>
              <el-tag
                v-if="scope.row.orderType === 1"
                type="warning"
              >秒杀订单</el-tag>
              <el-tag
                v-else
                type="success"
              >正常订单</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="note" label="备注" align="center" width="200" />
        <el-table-column prop="action" label="操作" align="center" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-view" style="width: 150px" @click="handleDetail(scope.row)">查看订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        :current-page="page.start"
        :page-sizes="pages"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
import { findOrdersByPage } from '@/api/order/list/index'
export default {
  data() {
    return {
      form: {
        orderSn: '',
        orderType: '',
        payType: '',
        status: ''
      },
      list: [], //  列表
      pages: [10, 20, 50, 100],
      page: {
        //  分页
        start: 1,
        limit: 10,
        total: 0
      }
    }
  },

  created() {
    // 获取订单列表
    this.getOrderList()
  },
  methods: {
    // form 提交
    onSearch() {
      this.getOrderList()
    },
    // 重置
    onReset() {
      this.form = {
        author: '',
        title: '',
        editorType: '' }
      this.getOrderList()
    },
    // 查看订单
    handleDetail(item) {
      this.$router.push(`/order/detail?id=${item.id}`)
    },
    // 获取列表
    async getOrderList() {
      const {
        success,
        data: { rows, total },
        message
      } = await findOrdersByPage(this.page.start, this.page.limit, this.form)
      if (success) {
        this.list = rows
        this.page.total = total
      } else {
        this.$message.error(message)
      }
    },
    handleSizeChange(val) {
      this.page.limit = val
      this.page.start = 1
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.page.start = val
      this.getOrderList()
    }
  }
}
</script>
<style lang="scss" scoped>
.article {
  .card {
    margin: 30px;
    .btns {
      display: flex;
      justify-content: flex-end;
    }

    .delBtn{
        color: red;
    }
    .pagination{
        text-align:right;
        margin-top:30px;
    }
    .item-icon{
      width: 100px;
      height: 100px;
    }
  }
}
</style>
